<template>
  <el-dialog :title="title" :visible.sync="visible"  class="dialog-sm" append-to-body @close="close">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
      <el-form-item label="参数名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入参数名称" maxlength="64"/>
      </el-form-item>
      <el-form-item label="参数键名" prop="config_key">
        <el-input v-model="form.config_key" placeholder="请输入参数键名" maxlength="64" :disabled="rowData && rowData.is_sys === '1'"/>
      </el-form-item>
      <el-form-item label="所属分组" prop="groups">
        <el-select v-model="form.groups" placeholder="请选择参数分组">
          <el-option v-for="(item, index) in groupList" :key="index" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="参数类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择参数类型">
              <el-option label="文本" value="text"/>
              <el-option label="文件" value="file"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="list_sort">
            <el-input-number v-model="form.list_sort" controls-position="right" :min="0" class="w-full"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="参数值" prop="textValue" v-if="form.type === 'file'">
        <file-upload size="small" list-type="picture" :limit="1" :default-list="defaultFile" v-model="form.fileValue"/>
      </el-form-item>
      <el-form-item label="参数值" prop="textValue" v-else>
        <el-input v-model="form.textValue" type="textarea" :autosize="{ minRows: 2}" placeholder="请输入参数值" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" maxlength="250"/>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="handleSubmit" :loading="submitting" :disabled="loading">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ListForm from '@/components/system/ListPage/list-form'
import { addConfigApi, editConfigApi, infoConfigApi } from '@/api/system/config'

export default {
  name: 'ConfigForm',
  mixins: [ListForm],
  data() {
    return {
      groupList: [],
      defaultFile:'',
      form: {
        name: undefined,
        config_key: undefined,
        type: 'text',
        list_sort: 10,
        groups: undefined,
        textValue: undefined,
        fileValue: undefined,
        remark: undefined
      }
    }
  },
  computed: {
    rules(){
      const rules = {
        name: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
        config_key: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
        type: [{ required: true, message: "参数类型不能为空", trigger: "blur" }],
        list_sort: [{ required: true, message: "参数排序不能为空", trigger: "blur" }],
      }
      this.$nextTick(()=>{
        this.$refs.formRef.clearValidate()
      })
      if(this.form.type === 'file'){
        return {...rules, fileValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]}
      } else {
        return {...rules, textValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]}
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      this.form.id = this.row?.id || undefined
      if (this.form.id) {
        this.title = '编辑参数'
        await this.getRowData()
      } else {
        this.title = '添加参数'
      }
      this.groupOptions()
      this.loading = false
    },
    async handleSubmit() {
      this.$refs.formRef.validate(async valid=>{
        if(!valid || this.submitting) return
        this.submitting = true
        let data = this.deepClone(this.form)
        delete data.textValue
        delete data.fileValue
        if (this.form.type === 'text'){
          data.value = this.form.textValue
        } else if (this.form.type === 'file') {
          data.value = this.form.fileValue
        }
        try {
          await this.$modal.confirm('确定提交表单数据？')
          if (this.form.id) {
            await editConfigApi(data)
          } else {
            await addConfigApi(data)
          }
          this.close(true, '操作成功')
        } catch (e) {
          this.submitting = false
        }
      })
    },
    async getRowData() {
      try {
        const { info } = await infoConfigApi(this.form.id)
        this.dataToForm(this.form, info)
        if (this.form.type === 'file') {
          this.form.fileValue = info?.value || ''
          this.defaultFile = info?.value || ''
        } else {
          this.form.textValue = info?.value || ''
        }
        this.rowData = info || {}
      } catch (error) {
        this.close()
      }
    },
    groupOptions() {
      this.getConfig('sys.conf.group').then(val=>{
        this.groupList = val?.split(';') || []
      })
    }
  }
}
</script>
